<template>
  <div>
    <van-form ref="processForm">
      <van-field
        required
        readonly
        clickable
        :value="showDate"
        label="比赛时间"
        placeholder="请选择比赛时间"
        :rules="rules.startTime"
        @click="showCalendar = true"
      />
      <van-field
        v-model.trim="vo.name"
        required
        label="分站赛名称"
        placeholder="请输入分站赛名称"
        :rules="rules.name"
      />
      <van-field
        required
        readonly
        clickable
        :value="levelShowName"
        label="认证等级"
        placeholder="请选择赛事的认证等级"
        :rules="rules.competitionCertificationLevelId"
        @click="showPicker = true"
      />
      <van-field
        v-model.trim="vo.address"
        required
        label="比赛地址"
        placeholder="请输入比赛地址"
        :rules="rules.address"
      />
      <van-field
        v-model.trim="vo.responsiblePersonName"
        required
        label="负责人"
        placeholder="请输入负责人姓名"
        :rules="rules.responsiblePersonName"
      />
      <van-field
        required
        readonly
        clickable
        :value="vo.responsiblePersonPhone"
        label="联系电话"
        placeholder="请输入负责人的手机号"
        :rules="rules.responsiblePersonPhone"
        @click="showNumPanel = true"
      />
    </van-form>
    <!-- 辅助组件 -->
    <van-calendar v-model="showCalendar" color="#5073B5" type="range" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmDate" />
    <van-number-keyboard :show="showNumPanel" @blur="showNumPanel = false" @input="onInputNumPanel" @delete="onDeleteNumPanel" />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="levelList" value-key="name" @confirm="onConfirmPicker" @cancel="showPicker = false" />
    </van-popup>

    <div class="bottom_btn">
      <van-button class="bottom_btn_style" type="primary" color="#31456c" block :loading="confirmLoading" @click="submitForm">提交资料</van-button>
    </div>
  </div>
</template>

<script>

import {
  api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId, // 获取分站赛的认证等级列表
  api_POST_EventsManagementCompetitionRequestCompetitionRequest // 提交举办分站赛申请（C端）
} from '@/extend/api/gameswaggerApi/app.js';

import {
  SiSTKWEventsManagementCompetitionRequestInput // 提交举办分站赛申请（C端）
} from '@/lib/form/game/swaggerForm';

import {
  SiSTKWEventsManagementCompetitionRequestInput_Rules
} from '@/lib/validate/mobile/league';

export default {
  props: {
    requiredIdData: {
      type: Object,
      default () {
        return {};
      }
    },
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 当前用户团体信息
    userTeamInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    district: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    const startDate = this.gameInfo.startTime.slice(0, 10);
    const endDate = this.gameInfo.endTime.slice(0, 10);
    const sDateArr = startDate.split('-');
    const eDateArr = endDate.split('-');
    const _minDate = new Date(sDateArr[0], sDateArr[1] - 1, sDateArr[2]);
    const _maxDate = new Date(eDateArr[0], eDateArr[1] - 1, eDateArr[2]);

    return {
      vo: new SiSTKWEventsManagementCompetitionRequestInput(),
      rules: new SiSTKWEventsManagementCompetitionRequestInput_Rules(),
      confirmLoading: false,
      levelList: [], // 认证等级列表
      levelShowName: '',
      showDate: '',
      minDate: _minDate,
      maxDate: _maxDate,
      showCalendar: false, // 日期选择显示隐藏
      showNumPanel: false, // 数字软键盘显示隐藏
      showPicker: false // 认证等级选择显示隐藏
    };
  },
  created() {
    this.getLevelDictList();
  },
  methods: {
    // 获取认证等级字典
    getLevelDictList() {
      api_GET_EventsManagementCompetitionRequestCompetitionCertificationLevelListLeagueCompetitionId(this.gameInfo.id)
        .then(
          res => {
            this.levelList = res;
          }
        )
        .catch(
          error => {
            this.$toast({ type: 'fail', message: `认证等级获取失败 ${error.error.message}` });
          }
        );
    },
    // 提交审核
    submitForm () {
      this.$refs.processForm.validate()
        .then(() => {
          this.vo.leagueCompetitionId = this.gameInfo.id;
          this.vo.delegationId = this.requiredIdData.delegationId;
          this.submitCompetitionRequest(this.vo);
        });
    },
    // 提交申办资料
    submitCompetitionRequest(vo) {
      this.confirmLoading = true;
      api_POST_EventsManagementCompetitionRequestCompetitionRequest(vo)
        .then(
          res => {
            this.$dialog.alert({
              message: '资料已提交。 \n审核结果将在“消息通知”里给予提醒。或登录后台查看审核进度。',
              beforeClose: (action, done) => {
                this.confirmLoading = false;
                this.$router.push({
                  name: 'SubstationList'
                });
                done();
              }
            });
          }
        )
        .catch(
          error => {
            this.confirmLoading = false;
            this.$toast({ type: 'fail', message: `分站赛申请失败 ${error.error.message}` });
          }
        );
    },
    // 确认认证等级选择
    onConfirmPicker(value) {
      this.address = value;
      this.levelShowName = value.name;
      this.vo.competitionCertificationLevelId = value.id;
      this.showPicker = false;
    },
    // 数字软键盘输入
    onInputNumPanel(value) {
      const _len = this.vo.responsiblePersonPhone.length;
      if (_len >= 11) return;
      this.vo.responsiblePersonPhone = this.vo.responsiblePersonPhone + value;
    },
    // 数字软键盘删除
    onDeleteNumPanel() {
      this.vo.responsiblePersonPhone = this.vo.responsiblePersonPhone.slice(0, -1);
    },
    // 确认选择日期
    onConfirmDate(date) {
      const [start, end] = date;
      const _start = new Date(start);
      const _sYear = _start.getFullYear();
      const _sMonth = _start.getMonth() < 9 ? '0' + (_start.getMonth() + 1) : _start.getMonth() + 1;
      const _sDay = _start.getDate() > 9 ? _start.getDate() : '0' + _start.getDate();

      const _etart = new Date(end);
      const _eYear = _etart.getFullYear();
      const _eMonth = _etart.getMonth() < 9 ? '0' + (_etart.getMonth() + 1) : _etart.getMonth() + 1;
      const _eDay = _etart.getDate() > 9 ? _etart.getDate() : '0' + _etart.getDate();

      this.showCalendar = false;
      this.showDate = `${_sYear}-${_sMonth}-${_sDay} 至 ${_eYear}-${_eMonth}-${_eDay}`;
      this.vo.startTime = `${_sYear}-${_sMonth}-${_sDay}`;
      this.vo.endTime = `${_eYear}-${_eMonth}-${_eDay}`;
    }
  }
};
</script>

<style lang="scss" scoped>
  .bottom_btn {
    position: fixed;
    height: 80px;
    padding: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .bottom_btn_style {
    height: 40px;
    border-radius: 4px;
  }
</style>
